<template>
  <a-drawer
    :title="title"
    :visible="visible"
    :width="400"
    @close="onClose"
    :destroyOnClose="true"
    :keyboard="false"
    :maskClosable="false"
    :body-style="{ paddingBottom: '60px' }"
  >
    <a-form :model="formRef" layout="vertical">
      <a-form-item label="费用类型名称" v-bind="validateInfos.name">
        <a-tooltip>
          <template #title>系统内置费用类型名称不可编辑</template>
          <a-input
            v-if="is_root"
            v-model:value="formRef.name"
            placeholder="请输入费用类型名称"
            :disabled="is_root"
          />
        </a-tooltip>
        <a-input
          v-if="!is_root"
          v-model:value="formRef.name"
          placeholder="请输入费用类型名称"
        />
      </a-form-item>
      <a-form-item label="费用分类" v-bind="validateInfos.category_id">
        <a-select
          ref="select"
          v-model:value="formRef.category_id"
          style="width: 100%"
          :options="
            cateList.map((item) => ({
              value: item.id,
              label: item.name,
            }))
          "
        >
        </a-select>
      </a-form-item>
      <a-form-item v-bind="validateInfos.is_important">
        <template #label>
          <span>特别重要</span>
          <text-tip
            tips="特别重要的费用类型，若欠费将会影响业务的使用。例如门锁、人脸门禁等将会失效。移动端自主缴费时，此项会自动勾选，必须缴纳。"
          />
        </template>
        <a-select
          v-model:value="formRef.is_important"
          style="width: 100%"
          :options="importantOptions"
        >
        </a-select>
      </a-form-item>
      <a-form-item >
        <template #label>
          <span>可否合并开票</span>
          <text-tip tips="选择否之后不可和其他费用类型合并开票（相同类型可合并）" />
        </template>
        <a-select
            v-model:value="formRef.is_merge"
            style="width: 100%"
            :options="mergelist"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="排序" v-bind="validateInfos.sort">
        <a-input-number
          id="inputNumber"
          v-model:value="formRef.sort"
          :min="0"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="状态" v-bind="validateInfos.status">
        <a-switch
          v-model:checked="formRef.status"
          :checkedValue="1"
          :unCheckedValue="0"
        />
      </a-form-item>
    </a-form>
    <div class="drawer-footer">
      <a-button @click="onClose">取消</a-button>
      <a-button type="primary" @click="onSubmit" style="margin-left: 10px"
        >保存</a-button
      >
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, watch, computed, reactive, toRefs, toRaw } from "vue";
import { Form, message, TreeSelect } from "ant-design-vue";
import request from "../../../../common/utils/request";
import store from "../../../../store/index";
import utils from "../../../../common/utils/utils";
import { PlusOutlined, QuestionCircleOutlined } from "@ant-design/icons-vue";
import moment from "moment";
const useForm = Form.useForm;
import { IMPORTANT_OPTIONS } from "@/common/utils/constant";
import { TextTip } from "bl-common-vue3";

export default defineComponent({
  name: "EditHotChat",
  components: {
    TextTip,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    is_root: {
      type: [Number, String],
      default: 0,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
    cateId: {
      type: [Number, String],
      default: 0,
    },
  },
  setup(props, context) {
    const state = reactive({
      cateList: [],
      importantOptions: IMPORTANT_OPTIONS,
      mergelist: [ {
        value: 0,
        label: '否',
      }, {
        value: 1,
        label: '是',
      }],
    });

    const title = computed(() => {
      return props.id ? "编辑费用类型" : "新建费用类型";
    });

    const formRef = reactive({
      name: "",
      category_id: null,
      sort: 0,
      status: 1,
      is_important: 0,
      is_merge:1,
    });

    const rulesRef = reactive({
      name: [{ required: true, message: "费用类型名称不能为空" }],
      category_id: [{ required: true, message: "费用分类名称不能为空" }],
      sort: [{ required: false, message: "费用类型名称不能为空" }],
      status: [{ required: false, message: "状态不能为空" }],
    });

    const { resetFields, validate, validateInfos } = useForm(formRef, rulesRef);

    const onClose = () => {
      context.emit("onClose");
    };

    const onSubmit = () => {
      validate().then(() => {
        let requestType = "post";
        let url = "/bill/costAdd";
        let params = {};
        for (let key in formRef) {
          params[key] = formRef[key];
        }
        if (props.id) {
          requestType = "put";
          url = "/bill/costEdit";
          params.id = props.id;
        }
        request[requestType]("/org", url, {
          ...params,
        }).then((res) => {
          message.success("保存成功");
          store.dispatch("RemoveTemplateInit").then(() => {
            store.dispatch("RemoveContractInit").then(() => {
              context.emit("success");
            });
          });
        });
      });
    };

    const getDetail = () => {
      request
        .get("/org", "/bill/billCostDetail", {
          id: props.id,
        })
        .then((res) => {
          if (res.detail) {
            for (let key in formRef) {
              formRef[key] = res.detail[key];
            }
          }
        });
    };

    const getCateList = () => {
      request.get("/org", "/bill/cost/categoryList", {setting: 1}).then((res) => {
        if (res.list) {
          state.cateList = res.list;
          console.log("props.cateId", props.cateId);
          if (props.cateId) {
            formRef.category_id = props.cateId;
          }
        }
      });
    };

    const init = () => {
      getCateList();
      if (props.id) {
        getDetail();
      }
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          resetFields();
          state.cateList = [];
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
      onSubmit,
      title,
      validateInfos,
      resetFields,
      formRef,
    };
  },
});
</script>

<style lang="less" scoped>
.batch-wrap {
  display: flex;
  align-items: center;

  .batch-label {
    padding-right: 10px;
  }
}

.list {
  margin-top: 30px;
  overflow: hidden;
  .line1 {
    width: 45%;
    padding: 0 20px;
  }
  .line2 {
    width: 15%;
    padding: 0 20px;
    text-align: right;
  }
  .line3 {
    width: 15%;
    padding: 0 20px;
    text-align: right;
  }
  .line4 {
    width: 25%;
    padding: 0 30px;
  }

  .list-head {
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    height: 60px;
  }

  .list-item {
    display: flex;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid #f1f1f1;

    .list-item-img {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 4px;
    }
    .list-item-desc-right {
      width: calc(100% - 40px);
      padding-left: 10px;

      .list-item-name {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .list-item-sku {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #999;
        font-size: 12px;
        margin-top: 5px;
      }
    }
  }
}
</style>
